<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- bootstrap -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
    integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua"
    crossorigin="anonymous"></script>
  <!-- bootstrap -->
  <script src="public/jQuery.min.js"></script>
  <link rel="stylesheet" href="./css/test.css">
  <title>测试</title>
</head>

<body>
  <div id="text">
    <header></header>
    <div class="textbox">
      <div class="text">
        <!-- 第一层 -->
        <div class="textone">
          <p class="totit">字体系列</p>
          <div class="container">
            <div class="row">
              <div class="col-md-4">
                <span>对于标题</span>
              </div>
              <div class="col-md-6">
                <span>对于底座</span>
              </div>
              <div class="col-md-4">
                <span class="totext">梅里韦瑟</span>
              </div>
              <div class="col-md-6">
                <span class="totext">梅里韦瑟无斯</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 第一层 -->
        <!-- 第二层 -->
        <div class="textone">
          <p class="totit">字体系列</p>
          <p class="ttwo1">H1 - 标题 - 34pX</p>
          <p class="ttwo2">H1 - 标题 - 24pX</p>
          <p class="ttwo3">H1 - 标题 - 21pX</p>
          <p class="ttwo4">H1 - 标题 - 16pX</p>
          <p class="ttwo5">H1 - 标题 - 14pX</p>
          <p class="ttwo6">H1 - 标题 - 12pX</p>
        </div>
        <!-- 第二层 -->
        <!-- 第三层 -->
        <div class="textone" style="border: none;">
          <p class="totit">
            发短信
          </p>
          <p class="ttwo5" style="color: #A39C9E">Lorem ipsum dolor sit amet,consectetur adipiscing elit.Fusce eu aus
            imperdiet,cursus erat
            vitae,dictum is et euismod sedroin vel rhoncusmuisque mattis dictum etiarem ipsum olor sit amet,consectetur
            adipiscing elit. Fusce eu acus impsus erat vitae,dictum nusmod sed nunc.Proin velrhoncus maurisuisoue
            mattism ipsum dolor sit amet. consectetur adipiscing elit.Fusce eu lacus imperdietcursus erat vitadictum
            nulla.Mauris eteuismod sed nunc.</p>
          <p class="ttwo4" style="color: #3F587F;">Consectetur adipiscing elit.Fusce eu lacus imperdiet, cursus erat
            vitae, dictum is et euismod sedroin vel rhoncusmuisque mattis dictum etiarem ipsum dolor sit amet,
            consectetur adipiscing elit.Fusce eu lacus impsus erat vitaedictum nusmod sed nuncroin vel rhoncus
            Maurisuisque mattism ipsum dolor sit amet consectetur adipiscing elit</p>
          <p class="totit">标题在这里</p>
          <p class="ttwo5" style="color: #A39C9E">Lorem ipsum dolor sit amet，consectetur adipiscing elit.Fusce eu lacus
            imperdiet,cursus erat
            vitae, dictum is et euismod sedroin velrhoncusmuisque mattis dictum etiarem psum dolr sit amet，consetetur
            adipiscing elit.Fusce eu lacus impsus erat vitae, dictum nusmod sed nunc.Proin vehonrus maurisuisaue mattism
            insum dolr sit amat ronsetetur adinicing elit Fusre eu acus imperdietcursus erat vitadictum nula Mauris
            eteuismod sednunc</p>
          <p class="ttwo2">标题在这里</p>
          <p class="ttwo5" style="color: #A39C9E">Etiarem ipsum dolor sit amet,consectetur adipiscing elit.Fusce eu
            lacus impsus erat vitae, dictum nusmod sed nunc.roin vel rhoncus maurisuisauemattism ipsum dolor sit
            amet,consectetur adipiscing elit.Fusce eu lacus imperdiet,cursus erat vitadictum nulla.Mauris et euismod sed
            nunce.</p>
          <p class="ttwo3">标题在这里</p>
          <p class="ttwo5" style="color: #A39C9E">Etiarem ipsum dolor sit amet,consectetur adipiscing elit.Fusce eu
            lacus impsus erat vitae, dictum nusmod sed nunc.roin vel rhoncus maurisuisauemattism ipsum dolor sit
            amet,consectetur adipiscing elit.Fusce eu lacus imperdiet,cursus erat vitadictum nulla.Mauris et euismod sed
            nunce.</p>
        </div>
        <!-- 第三层 -->
        <!-- 第四层 -->
        <div class="fourbox">
          <p class="ttwo3">标题在这里</p>
          <p class="ttwo5" style="color: #A39C9E">Etiarem ipsum dolor sit amet,consectetur adipiscing elit.Fusce eu
            lacus impsus erat vitae, dictum nusmod sed nunc.roin vel rhoncus maurisuisauemattism ipsum dolor sit
            amet,consectetur adipiscing elit.Fusce eu lacus imperdiet,cursus erat vitadictum nulla.Mauris et euismod sed
            nunce.</p>
        </div>
        <!-- 第四层 -->
        <!-- 块引用 -->
        <div class="textone">
          <p class="totit">块引用</p>
          <div class="blockbox">
            <p class="ttwo3">“Morbi justo nundiqnissim non scelerisque necsceler isque acantorem ipsumsitamet ante ipsum pis in faucibus?</p>
            <p class="ttwo6">-约翰尼·勒罗斯</p>
          </div>
        </div>
        <!-- 块引用 -->
      </div>
    </div>
    <footer></footer>
  </div>

  <script>
    // 头部尾部
    $(function () {
      $("header").load("./header.html")
      $("footer").load("./footer.html")
    });
        // 头部尾部
  </script>
</body>

</html>